<template>
  <div class="tab-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="NameOfRoleListSearch" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchRoleList">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮选项 -->
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="openAddRoleDialog">增加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="confirmBatchDelete">删除</el-button>
      <el-button type="primary" icon="el-icon-folder" @click="openAllocateResourceDialog">资源分配</el-button>
      <el-button type="primary" icon="el-icon-user-solid" @click="openAllocateUserDialog">用户分配</el-button>
      <el-button type="primary" icon="el-icon-user-solid" disabled>公司分配</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="searchRoleList">刷新</el-button>

    </el-row>

    <!-- 角色列表 -->
    <el-table :data="tableData" style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectAll">
      <el-table-column type="selection" width="50" />
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="角色" width="80">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>角色: {{ scope.row.name }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="角色编号" width="80">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>角色编号: {{ scope.row.code }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.code }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="角色备注" width="140">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>角色备注: {{ scope.row.remark }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.remark }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="所属公司" width="140">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>所属公司: {{ scope.row.companyName }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.companyName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="所属机构" width="140">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>所属机构: {{ scope.row.orgName }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.orgName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag :type="getTagType(scope.row.status)" size="medium">{{ getStateText(scope.row.status) }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleCopy(scope.$index, scope.row)">复制</el-button>
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
          <el-button size="mini" type="warning" @click="checkAuthority(scope.row)">查看权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增角色表单 -->
    <AddRoleForm
      :key="addRoleDialogKey"
      :visible="addRoleDialogVisible"
      @update:visible="handleAddRoleDialogVisibleUpdate"
    />

    <!--  编辑用户 -->
    <EditRoleForm
      :visible="editDialogVisible"
      :initial-data="currentRoleData"
      @update:visible="handleEditRoleDialogVisibleUpdate"
    />

    <!-- 资源分配表单 -->
    <AllocateResourceForm
      :key="allocateResourcedialogKey"
      :visible="allocateResourceDialogVisible"
      :role-resource-data="resourceData"
      :selected-role-names="allocateResourceDialogRoleNames"
      :selected-role-ids="selectedRoleIds"
      :role-company-data="companyData"
      :operate-option="allocateResourceFormOperateOption"
      @update:visible="handleResourceDialogVisibleUpdate"
    />

    <!-- 用户分配表单 -->
    <AllocateUserForm
      :key="allocateUserdialogKey"
      :visible="allocateUserDialogVisible"
      :selected-id="selectedRoleIds"
      :user-data="userData"
      @update:visible="handleUserDialogVisibleUpdate"
    />

  </div>
</template>

<script>
import store from '@/store'
import AddRoleForm from './form/AddRoleForm.vue' // 导入添加角色对话框组件
import { MessageBox, Message } from 'element-ui'
import AllocateResourceForm from './form/AllocateResourceForm.vue' // 导入资源分配对话框组件
import AllocateUserForm from './form/AllocateUserForm.vue' // 导入用户分配对话框组件
import EditRoleForm from './form/EditRoleForm.vue'
import { searchRoleListWithPageAndNameAndCompanyAPI, checkRoleIfWithResource, checkSingleRoleUserAPI, checkSingleOrMultipleRoleCompanyAPI, singleOrBatchDeleteRoleAPI, checkSingleOrMultipleRoleResourceAPI } from '@/api/role'
export default {
  name: 'Role',
  components: {
    AddRoleForm,
    AllocateResourceForm,
    AllocateUserForm,
    EditRoleForm
  },
  data() {
    return {
      // 所有表单可见性-----------------------------

      addRoleDialogVisible: false, // 添加角色表单显示
      editDialogVisible: false, // 编辑角色表单显示
      allocateResourceDialogVisible: false, // 资源分配表单的显示
      allocateUserDialogVisible: false, // 用户分配对话框显示

      // 以下三个key值用来强制重新渲染对话框 -------表单重新渲染
      allocateUserdialogKey: 0, // 初始值为0
      allocateResourcedialogKey: 10,
      addRoleDialogKey: 100,

      // 页码相关-----------------------------------
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的记录数

      // 单一角色功能数据--------------------------

      NameOfRoleListSearch: '', // 角色列表上方的姓名搜索功能

      roleQuery: '', // 用于角色列表查询参数

      tableData: [], // 角色列表信息

      currentRoleData: {}, // 被编辑用户数据

      selectedRows: [], // 角色列表多选行数据

      selectedRoleIds: '', // 当前多选框选中的id列表

      // 角色资源相关数据-------------------------------

      selectedRoleNames: '', // 当前多选框已经选中的角色的名称
      allocateResourceDialogRoleNames: '', // 打开分配资源表单时对应的角色名称，包含两种情况，一种是多选框赋值---对应上方的selectedRoleNames，另一种是角色列表的单列查看权限按钮

      // 资源数据
      resourceData: [],

      // 分配资源表单操作选择 [分配资源，查看权限]
      allocateResourceFormOperateOption: '',

      // 角色公司相关数据-------------------------------
      companyData: [],

      // 角色用户相关数据-------------------------------
      userData: ''

    }
  },

  // 监听数据变化
  watch: {

    // 当前页的数据
    pageSize() {
      this.searchRoleList()
    },
    currentPage() {
      this.searchRoleList()
    }
  },

  created() {
    // // 在 created 生命周期钩子中进行初始化
    // this.roleQuery.pageSize = this.pageSize; // 可以在此处进行赋值操作
    // this.roleQuery.pageNumber = this.currentPage;

    this.searchRoleList()
  },

  methods: {
    // 查询角色列表
    async searchRoleList() {
      try {
        // 确保 roleQuery 对象已在组件中定义并初始化
        this.roleQuery = {
          pageSize: this.pageSize,
          pageIndex: this.currentPage,
          companyIds: store.getters.companyId,
          name: this.NameOfRoleListSearch
        }

        // 调用异步函数并等待结果
        const response = await searchRoleListWithPageAndNameAndCompanyAPI(this.roleQuery)

        // 打印响应数据（用于调试）
        console.log('Response:', response)

        // 处理响应数据
        this.tableData = response.data
        this.total = response.total
      } catch (error) {
        // 处理错误
        console.error('Error:', error)
      }
    },

    // 打开新增角色组件
    openAddRoleDialog() {
      this.addRoleDialogKey += 1
      this.addRoleDialogVisible = true
    },
    handleAddRoleDialogVisibleUpdate(val) {
      this.addRoleDialogVisible = val
      this.searchRoleList()
    },

    // 打开编辑角色组件

    handleEdit(row) {
      this.currentRoleData = { ...row }
      this.editDialogVisible = true
    },
    handleEditRoleDialogVisibleUpdate(val) {
      this.editDialogVisible = val
      this.searchRoleList()
    },

    // 多选框删除角色
    async batchDeleteRole() {
      const ids = this.selectedRows.map(row => row.id)
      // 调用异步函数并等待结果
      await singleOrBatchDeleteRoleAPI(ids)
      // 执行一次刷新操作
      this.searchRoleList()
    },
    // 多选框删除角色，操作确认方法
    confirmBatchDelete() {
      if (this.selectedRows.length === 0) {
        Message.warning('请先选择要删除的角色')
        return
      }
      MessageBox.confirm('此操作将永久删除选中的角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.batchDeleteRole()
        })
        .catch(() => {
          Message.info('已取消删除')
        })
    },

    // 单行按钮删除操作确认方法
    confirmDelete(row) {
      MessageBox.confirm('此操作将永久删除所选角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteRole([row.id])
        })
        .catch(() => {
          Message.info('已取消删除')
        })
    },
    // 单行删除操作
    async  deleteRole(ids) {
      // 调用异步函数并等待结果
      await singleOrBatchDeleteRoleAPI(ids)
      // 执行一次刷新操作
      this.searchRoleList()
    },

    // 查看单个角色权限
    async checkAuthority(row) {
      this.allocateResourceFormOperateOption = '查看权限' // 将分配资源的表单的标题进行更改
      this.allocateResourceDialogRoleNames = row.name // 角色列表后方查看权限按钮，将传递给子组件的角色名称赋值为当前列角色的名称
      this.allocateResourcedialogKey += 1

      const roleResourceRequest = {
        roleIds: row.id,
        tenantId: this.$store.getters.tenantId
      }

      const roleCompanyRequest = row.id// 获取多选框已经选中的角色ids，结果为逗号分隔的一个字符串

      const roleResourceResponse = await checkSingleOrMultipleRoleResourceAPI(roleResourceRequest)// 发送角色资源相关网络请求

      const roleCompanyResponse = await checkSingleOrMultipleRoleCompanyAPI({ roleIds: roleCompanyRequest })// 发送角色公司相关网络请求
      this.resourceData = roleResourceResponse // 更新选中的角色的资源信息

      this.companyData = roleCompanyResponse // 更新选中的角色的公司信息

      this.allocateResourceDialogVisible = true
    },

    // 角色资源相关方法--------------------------------------

    // 打开资源分配组件
    async openAllocateResourceDialog() {
      this.allocateResourcedialogKey += 1
      this.allocateResourceFormOperateOption = '资源分配'
      if (this.selectedRows.length === 0) {
        Message.error('至少选择一个角色进行资源分配')
        return
      }
      // 获取数据
      this.selectedRoleIds = this.selectedRows.map(row => row.id)// 获取多选框已经选中的角色ids,结果为数组
      this.allocateResourceDialogRoleNames = this.selectedRoleNames // 分配资源表单上方的操作角色名称赋值为 获取多选框已经选中的角色名称

      const roleResourceRequest = {
        roleIds: '',
        tenantId: this.$store.getters.tenantId
      }

      const roleCompanyRequest = this.selectedRows.map(row => row.id).join(',')// 获取多选框已经选中的角色ids，结果为逗号分隔的一个字符串
      roleResourceRequest.roleIds = this.selectedRows.map(row => row.id).join(',')// 获取多选框已经选中的角色ids，结果为逗号分隔的一个字符串

      const roleResourceResponse = await checkSingleOrMultipleRoleResourceAPI(roleResourceRequest)// 发送角色资源相关网络请求

      const roleCompanyResponse = await checkSingleOrMultipleRoleCompanyAPI({ roleIds: roleCompanyRequest })// 发送角色公司相关网络请求
      this.resourceData = roleResourceResponse// 更新选中的角色的资源信息

      this.companyData = roleCompanyResponse// 更新选中的角色的公司信息

      this.allocateResourceDialogVisible = true
    },
    // 关闭资源分配表单方法
    handleResourceDialogVisibleUpdate(value) {
      this.allocateResourceDialogVisible = value
    },

    // 角色分配用户相关方法--------------------------------------

    // 处理子组件传递的可见性信号，值只有false，关闭该用户分配表单
    handleUserDialogVisibleUpdate(val) {
      this.allocateUserDialogVisible = val
    },

    // 打开用户分配组件
    async openAllocateUserDialog() {
      this.allocateUserdialogKey += 1 // 每次打开对话框时更新key值
      if (this.selectedRows.length !== 1) {
        Message.error('进行用户分配时，请选择一个角色')
        return
      }

      // 根据多选框获取单个角色的id
      this.selectedRoleIds = this.selectedRows[0].id

      // 进行角色的资源状态检查，只有已经绑定资源的角色可以进行用户分配
      const checkResponse = await checkRoleIfWithResource({ roleId: this.selectedRoleIds })
      if (checkResponse === '请对角色分配资源后，再进行本次分配用户操作') {
        Message.error(checkResponse)
        return
      } else if (checkResponse === '当前角色拥有资源，可以进行分配用户操作') {
        const request = {
          pageIndex: 1,
          pageSize: 10,
          companyId: this.$store.getters.companyId,
          roleId: this.selectedRoleIds,
          name: ''
        }

        const response = await checkSingleRoleUserAPI(request)
        this.userData = response

        this.allocateUserDialogVisible = true
      } else {
        Message.error('发生未知错误')
      }
    },

    handleCopy(index, row) {
      console.log(index, row)
    },

    // 状态信息
    getStateText(status) {
      return status === 1 ? '启用' : '停用'
    },
    getTagType(status) {
      return status === 1 ? 'success' : 'danger'
    },

    // 角色列表多选框
    handleSelectionChange(selection) {
      this.selectedRows = selection
      this.selectedRoleNames = this.selectedRows.map(row => row.name).join(',')// 获取多选框已经选中的角色名称
    },
    handleSelectAll(selection) {
      this.selectedRows = selection
      this.selectedRoleNames = this.selectedRows.map(row => row.name).join(',')// 获取多选框已经选中的角色名称
    },

    // 页码和页大小信息改变时，更改相应数据
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }

  }
}
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
